<template>
  <Table :columns="insideColums" :data="data"></Table>
</template>

<script>
export default {
  name: 'EditTable',
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      insideColums: []
    }
  },
  methods: {
    handleClick({ row, index, column }) {
      row[column.key] = 20
    }
  },
  mounted() {
    const insideColumns = this.columns.map(item => {
      if (item.editTable && !item.render) {
        item.render = (h, { row, index, column }) => {
          return ( // jsx
            <div>
              {row[column.key]}
              <i-button on-click={() => this.handleClick({ row, index, column })}>编辑</i-button>
            </div>
          )
        }
        return item
      } else {
        return item
      }
    })
    this.insideColums = insideColumns
  }
}
</script>
